<template>
  <el-card>
    <el-table
      :data="permissionList"
      border
      row-key="id"
      :expand-row-keys="expandRowKeys"
    >
      <el-table-column label="名称" prop="name"></el-table-column>
      <el-table-column label="权限值" prop="code"></el-table-column>
      <el-table-column label="组件路径" prop="toCode"></el-table-column>
      <el-table-column label="操作">
        <template v-slot="{ row }">
          <el-button
            type="primary"
            :icon="Plus"
            size="small"
            @click="showSavePermission(row)"
            v-if="row.level !== 4"
            v-permission="'btn.Permission.add'"
          />
          <el-button
            type="warning"
            :icon="Edit"
            size="small"
            @click="showUpdatePermission(row)"
            v-if="row.level !== 1"
            v-permission="'btn.Permission.update'"
          />
          <el-button
            type="danger"
            :icon="Delete"
            size="small"
            @click="removePermission(row.id)"
            v-if="row.level !== 1"
            v-permission="'btn.Permission.remove'"
          />
        </template>
      </el-table-column>
    </el-table>
  </el-card>

  <el-dialog
    v-model="visible"
    :title="`${permissionFormData.id ? '修改' : '添加'}菜单`"
  >
    <el-form>
      <el-form-item label="菜单名称">
        <el-input v-model="permissionFormData.name"></el-input>
      </el-form-item>
      <el-form-item label="权限值">
        <el-input v-model="permissionFormData.code"></el-input>
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button type="primary" @click="saveOrUpdatePermission"
          >确定</el-button
        >
        <el-button @click="visible = false">取消</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script lang="ts">
export default {
  name: 'XPermission',
}
</script>

<script lang="ts" setup>
import { Plus, Edit, Delete } from '@element-plus/icons-vue'
import { onMounted, ref, reactive } from 'vue'
import {
  getPermissionListApi,
  savePermissionApi,
  updatePermissionApi,
  removePermissionApi,
} from '@/api/alc/permission'
import type {
  PermissionList,
  PermissionItem,
} from '@/api/alc/model/permissionModel'
import { ElMessage } from 'element-plus'

const removePermission = async (id: string) => {
  await removePermissionApi(id)
  ElMessage.success('删除菜单成功')
  getPermissionList()
}

const permissionList = ref<PermissionList>([])
const expandRowKeys = ref<string[]>([])

const getPermissionList = async () => {
  const result = await getPermissionListApi()
  permissionList.value = result.children
  return result.children
}

onMounted(async () => {
  const result = await getPermissionList()
  // 默认要展开的元素
  expandRowKeys.value.push(result[0].id)
})

// const expandChange = (expandedRows: PermissionItem, expanded: boolean) => {
//   if (expanded) {
//     expandRowKeys.value.push(expandedRows.id);
//     return;
//   }
//   expandRowKeys.value = expandRowKeys.value.filter((id) => id !== expandedRows.id);
// };

const visible = ref(false)

const permissionFormData = reactive({
  id: '',
  pid: '',
  code: '',
  name: '',
  level: 1,
})

// 显示添加菜单：给当前菜单添加子菜单
const showSavePermission = (row: PermissionItem) => {
  visible.value = true

  permissionFormData.pid = row.id
  permissionFormData.id = ''
  permissionFormData.code = ''
  permissionFormData.name = ''
  permissionFormData.level = row.level + 1
}

const showUpdatePermission = (row: PermissionItem) => {
  visible.value = true

  permissionFormData.id = row.id
  permissionFormData.pid = ''
  permissionFormData.code = row.code
  permissionFormData.name = row.name
  permissionFormData.level = row.level
}

const saveOrUpdatePermission = async () => {
  const { id, pid, name, code, level } = permissionFormData
  if (id) {
    await updatePermissionApi({
      id,
      name,
      code,
      level,
    })
  } else {
    await savePermissionApi({
      pid,
      name,
      code,
      level,
    })
  }
  ElMessage.success(`${id ? '更新' : '添加子'}菜单成功`)

  await getPermissionList()

  visible.value = false
}
</script>

<style scoped></style>
